<template>
  <div id="ArticleList">
     <!-- 下拉刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="finished">
          <!-- 上拉加载更多 -->
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false">
            <!-- 循环渲染文章的列表 -->
            <ArtItem v-for="(item,index) in artList" :key="index" :article="item" @remove-article="removeArticle"></ArtItem>
          </van-list>
        </van-pull-refresh>
   
  </div>
</template>

<script>
  import ArtItem from '../ArtItem/ArtItem.vue'
  // 导入api的接口
  import {
    getArtListAPI
  } from '../../api/homeAPI.js';
  export default {
    // 大驼峰命名法：每个单词的首字母大写
    name: 'ArticleList',
    data() {
      return {
        artList: [],
        timestamp: Date.now(),
        loading: false,
        finished: false,
        isLoading: false
      }
    },
    props: {
      channelId: {
        type: Number,
        required: true
      }
    },
    methods: {
      // 初始化文章列表数据
      async initArtList(isRefresh) {
        // 请求 API 接口
        const {
          data: res
        } = await getArtListAPI(this.channelId, this.timestamp)
        if (res.message === 'OK') {
          // 为时间戳重新赋值
          this.timestamp = res.data.pre_timestamp
          if (isRefresh){
            this.artList = [...res.data.results,...this.artList ]
            this.isLoading = false
          }else{
            // 为 artlist 赋值 ,上拉刷新后旧数据在前，新数据在后
            this.artList = [...this.artList, ...res.data.results]
            // 重置 loading为false
            this.loading = false
          }
         // 为 artlist 赋值 ,上拉刷新后旧数据在前，新数据在后
         this.artList = [...this.artList, ...res.data.results]
         // 重置 loading为false
         this.loading = false
          // 判断所以的数据是否加载完毕
          if (res.data.pre_timestamp === null) {
            this.finished = true
          }
        }
      },
      // 上拉加载更多
      onLoad() {
        console.log('触发了上拉更多')
        this.initArtList()
      },
      // 下拉刷新
      onRefresh(){
        console.log('下拉刷新')
        this.initArtList(true)
      },
       // 从文章列表中移除指定 id 的文章
        removeArticle(id) {
          // 对原数组进行 filter 方法的过滤
          this.artList = this.artList.filter(item => item.art_id.toString() !== id)
           // 2. 判断剩余数据的文章数量是否小于 10
          if(this.artList.length < 10){
            // 主动请求下一页的数据
            this.initArtList()
          }
       }
    },
    created() {
      // 在组件创建的时候，请求文章的列表数据
      this.initArtList()
    },
    components: {
      ArtItem
    }
  }
</script>

<style lang="less" scoped></style>
